<template>
	<view class="goods-list">
		<view class="goods-list-container">
			<view class="total-num">共{{ totalNum }}件商品</view>
			<view class="list">
				<van-card
					v-for="(cart, idx) in list"
					:key="idx"
					:num="cart.cart_num"
					:price="cart.truePrice"
					:desc="cart.productInfo.attrInfo.suk"
					:title="cart.productInfo.store_name">
					<view slot="thumb" class="thumb">
						<image :src="cart.productInfo.attrInfo.image"></image>
					</view>
				</van-card>
			</view>
		</view>
	</view>
</template>

<script>
	import VanCard from '@/wxcomponents/vant/card/index'
	export default {
		components: {
			VanCard
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			totalNum () {
				let totalNum = 0
				this.list.forEach((cart) => {
					totalNum += cart.cart_num
				})
				return totalNum
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list {
		&-container {
			.total-num {
				height: 86rpx;
				padding: 0 30rpx;
				border-bottom: 2rpx solid #f0f0f0;
				font-size: 30rpx;
				color: #282828;
				line-height: 86rpx;
			}
			::v-deep van-card {
				.thumb {
					display: flex;
					align-items: center;
					image {
						width: 160rpx;
						min-width: 160rpx;
						height: 160rpx;
					}
				}
				.van-card__content {
					padding-left: 20rpx;
				}
			}
		}
	}
</style>
